<template>
	<div style="user-select: none;">
		<!--头部信息卡片-->
		<el-card class="box-card elma-20">
			<h2 class="system-title">易唐科技·在线无纸化考试系统</h2>
			<strong class="subject-title">科目:{{subject}} </strong>
          
			<div class="info-case">
				<strong style="margin-right: 20px;">准考证号: X20200414</strong>
				<strong>姓名: 张三</strong>
			</div>
		</el-card>
		<el-container>
			<!--左侧答题卡、时间显示卡片-->
			<el-card class="box-card" style="position: relative;">
				<el-aside>
					 <countdown endText="已经结束了" ref="countCpn"></countdown>
					<div class="prompt-case">
						<p>题号列表</p>
						<p>(单击题号可直接跳转到该题)</p>
						<p>红色代表未做，黑色代表已做</p>
					</div>
					<ul class="question-card">
						<li v-for="(item, index) in dataset.answer" 
							@click="questionCard(index+1)"
							:class="{highlight:activeName==index+1}"
							:style="{'color': item.select ? 'black' : 'red'}"
						>{{ index+1 }}</li>
					</ul>
					<p class="undone-sum">未做题数: {{ notDone }}道</p>
				</el-aside>
			</el-card>
			
			<!--右侧答题部分-->
			<el-card class="box-card main">
				<div>提示: 单项选择题(总{{ total }}道题，每题5分，共100分)</div>
				<el-main>
					<!--自定义分页子组件-->
					<pagination :par="dataset" ref="mychild"></pagination>
				</el-main>
				<div class="pagination">
					<el-button @click="previous">上一题</el-button>
					<el-button @click="nextpage">下一题</el-button>
					<span>跳转到 <input type="text" value="1" class="jump" ref="jump" @keyup.13="jumpPage" /> 道</span>
					<el-button @click="jumpPage">跳转</el-button>
					<el-button type="danger" class="turn-in" @click="turnIn">交卷</el-button>
				</div>
			</el-card>
		</el-container>
	</div>
</template>

<script>
import pagination from '@/components/pagination.vue'
import countdown from '@/components/countdown'
export default{
	name: "examination",
	data () {
		return {
			testBank: [], // 获取到的原题目
			dataset: {
				answer: [] // 考生作答题目含答案
			},
			page: 1, // 当前第几道题
			activeName: 1, // 记录当前应该高亮哪个题卡
			notDone: 0 ,// 记录当前还有多少道题还没做
			subject:''   //考试科目
		}
	},
	// vue的钩子函数，vue创建后执行的函数(用于获取考题)
	created () {
		this.getTitle()
	},
	components: {
		pagination, // 自定义的分页子组件
		countdown   //倒计时组件
	},
	methods: {
		// 获取答卷
		getTitle(){
             this.axios.get('/api/getTitle').then(res=>{
				this.$refs.countCpn.countdowm(res.data.time);
				this.dataset.answer=res.data.examPaper
				this.subject=res.data.examPaper[0].subject
			})
		},
		// 交卷
		turnIn () {
			//this.$refs.mychild.instructionSet() // 废弃
			// console.log(this.dataset.answer); // 由于存在对象引用关系，不用传值，这个就是考生答题选的答案
		  var a=  this.dataset.answer.filter(item=>{
				return item.select==item.answer
			}) 
			var score=100/this.dataset.answer.length*a.length
			this.$message.success('您的得分为:'+score+'分')
		},

		// 上一道题
		previous () {
			this.$refs.mychild.previous();
			this.pagenum();
		},
		// 下一道题
		nextpage () {
			this.$refs.mychild.nextpage();
			this.pagenum();
		},
		
		// 题目跳转
		jumpPage () {
			var jump = this.$refs.jump.value; // 获取输入页码
			var total = this.total; // 总共有多少页
			
			if( !isNaN(jump) && jump != '' && jump >= 1 && jump <= total ){
				this.$refs.mychild.jumpPage(jump);
				this.pagenum();
			}else{
				return alert("输入不合法！");
			}
		},
		
		// 获取当前是第几道题
		pagenum () {
			this.page = this.$refs.mychild.pagenum();
			this.activeName = this.page;
		},
		// 题卡响应
		questionCard (index) {
			this.$refs.mychild.jumpPage(index);
			this.pagenum();
			this.activeName = index;
		}
	},
	computed: {
		// 计算属性，计算总共有多少道试题
		total () {
			return Math.ceil(this.testBank.length)
		}
	},
	watch: {
		// 监听数组状态，看看还有多少道题没有做
		'dataset.answer': {
			deep: true, // 深度监听必要参数******
			handler (newVal, oldVal) {
				let res = 0;
				newVal.forEach(item => {
					!item.select ? res-- : res
				});
				this.notDone = Math.abs(res);
			}
		}
	}
}
</script>

<style scoped="scoped">
.elma-20{
	margin: 0 20px;
}
/*系统标题*/
.system-title{
	display: inline-block;
	line-height: 60px;
	margin-right: 40px;
}
/*科目标题*/
.subject-title{
	line-height: 60px;
	font-size: 24px;
}
/*考试信息的容器*/
.info-case{
	display: inline-block;
	line-height: 60px;
	float: right;
}
/*占满剩下的空间*/
.el-container{
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 6px 20px;
}
/*用于存放提示性文字，例如时间、题卡说明*/
.prompt-case{
	margin: 10px auto 20px;
	text-align: center;
	font-size: 1.375rem;
	line-height: 30px;
}
/*题卡容器*/
.question-card{
	margin: 10px 10px;
	overflow: auto;
	border: 2px dashed #eee
}
/*答题卡元素*/
.question-card li{
	list-style: none;
	width: 47px;
	height: 40px;
	background-color: #c7bfff;
	margin: 4px 4px;
	float: left;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
}
.question-card li:hover{
	background-color: #66b1ff;
}
/*未完成题数*/
.undone-sum{
	text-align: center;
	margin-top: 40px;
	font-size: 22px;
}
/*主体答题部分*/
.main{
	width: calc(100% - 384px);
	position: relative;
}

/*答题底部分页器*/
.pagination{
	position: absolute;
	bottom: 0px;
	transform: translateY(-108px);
	width: 100%;
	height: 60px;
	border-top: 1px dashed #72767B;
	line-height: 60px;
	padding-left: 20px;
}
/*跳转输入框*/
.jump{
	width: 36px;
	height: 20px;
}
/*交卷按钮*/
.turn-in{
	float: right;
	margin: 11px 60px;
}
@media screen and (max-width: 928px) {
	.pagination{
		transform: translateY(-148px);
	}
}
</style>
